<template>
  <div class="fjhkyzzsc">
    <div class="box">
      <span style="color: red">* </span>
      <span class="lable">检验检查单类型：</span>
      <el-select
        filterable
        placeholder="请选择检验检查单类型"
        size="small"
        style="width: 300px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="box">
      <span style="color: red">* </span>
      <span class="lable">附件：</span>
      <el-upload
        style="display: inline-block"
        action="https://jsonplaceholder.typicode.com/posts/"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <p style="color: #f19332">
        温馨提示：请上传JPG、PNG格式图片，图片大小不超过20M，最多可上传两张图片
      </p>
    </div>
    <div class="box">
      <span style="color: red">* </span>
      <span class="lable">检验日期/报告日期：</span>
      <el-date-picker
        style="width: 300px"
        v-model="value2"
        align="right"
        type="date"
        placeholder="选择报告日期"
        :picker-options="pickerOptions"
        size="small"
      >
      </el-date-picker>
    </div>
    <div class="box">
      <span style="color: red">* </span>
      <span class="lable">检查机构：</span>
      <el-select
        filterable
        placeholder="请选择检查机构"
        size="small"
        style="width: 300px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="box">
      <span style="color: red">* </span>
      <span class="lable">录入人员：</span>
      <el-select
        filterable
        placeholder="请选择录入人员"
        size="small"
        style="width: 300px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="box">
      <span style="color: red">* </span>
      <span class="lable">录入时间：</span>
      <el-date-picker
        style="width: 300px"
        v-model="value2"
        align="right"
        type="date"
        placeholder="录入时间"
        :picker-options="pickerOptions"
        size="small"
      >
      </el-date-picker>
    </div>
    <div class="box">
      <span class="lable">备注：</span>
      <el-input
        style="width: 300px; vertical-align: middle"
        type="textarea"
        :rows="4"
        placeholder="请输入备注（200字）"
        v-model="textarea"
      >
      </el-input>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
      
      <script>
export default {
  data() {
    return {
      info: {
        有肺结核可疑症状: [],
      },
      options: [
        {
          value: "测试",
          label: "测试",
        },
      ],
      pickerOptions: {
        
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
        ],
      },
      value2: "",
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  methods: {
    handleRemove(file, fileList) {
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>
      
      <style scoped lang="scss">
.fjhkyzzsc {
  .top {
    padding: 10px 20px;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
  }
  .tab1 {
    tr {
      width: 100%;
      th {
        text-align: center;
        color: #000;
        background-color: rgb(250, 250, 250);
      }
      td {
        padding: 10px;
      }
    }
  }
  .box {
    padding: 10px 20px;
    background-color: rgb(250, 250, 250);
    margin: 10px 0;
    .lable {
      display: inline-block;
      width: 200px;
    }
  }
}
::v-deep input[type="file"] {
  display: none;
}
</style>